<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
<  index.html: VLC media player web interface - VLM
< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
<  Copyright (C) 2005-2006 the VideoLAN team
<  $Id$
<
<  Authors: Brandon Brooks <bwbrooks -at- archmageinc -dot- com>
<
<  This program is free software; you can redistribute it and/or modify
<  it under the terms of the GNU General Public License as published by
<  the Free Software Foundation; either version 2 of the License, or
<  (at your option) any later version.
<
<  This program is distributed in the hope that it will be useful,
<  but WITHOUT ANY WARRANTY; without even the implied warranty of
<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
<  GNU General Public License for more details.
<
<  You should have received a copy of the GNU General Public License
<  along with this program; if not, write to the Free Software
<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<html>
	<head>
		<title>VLC media player - Web Interface</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript">
			if(isMobile()){
				window.location='mobile.html';
			}
		</script>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
		<link type="text/css" href="css/main.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.jstree.js"></script>
		<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
		<script type="text/javascript" src="js/ui.js"></script>
		<script type="text/javascript" src="js/controlers.js"></script>
		<script type="text/javascript">
			var pollStatus	=	true;
			$(function(){
				$('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
				$('.button48').hover(
					function(){$(this).css({'filter':'alpha(opacity=50)','-moz-opacity':'0.5','-khtml-opacity': '0.5'})},
					function(){$(this).css({'filter':'alpha(opacity=100)','-moz-opacity':'1','-khtml-opacity': '1'})}
				);
				$('#buttonPlayList').click(function(){
					$('#libraryContainer').animate({
						height: 'toggle'
					});
					return false;
				});
				$('#buttonViewer').click(function(){
					$('#viewContainer').animate({
						height: 'toggle'
					})
					return false;
				});
				$('#buttonEqualizer').click(function(){
					updateEQ();
					$('#window_equalizer').dialog('open');
					return false;
				})
				$('#buttonOffsets').click(function(){
					$('#window_offset').dialog('open');
					return false;
				});
				$('#buttonBatch').click(function(){
					$('#window_batch').dialog('open');
					return false;
				});
				$('#buttonOpen').click(function(){
					browse_target	=	'default';
					browse();
					$('#window_browse').dialog('open');
					return false;
				});
				$('#buttonPrev').mousedown(function(){
					intv	=	1;
					ccmd	=	'prev';
					setIntv();
					return false;
				});
				$('#buttonPrev').mouseup(function(){
					if(intv<=5){
						sendCommand({'command':'pl_previous'});
					}
					intv	=	0;
					return false;
				});
				$('#buttonNext').mousedown(function(){
					intv	=	1;
					ccmd	=	'next';
					setIntv();
					return false;
				});
				$('#buttonNext').mouseup(function(){
					if(intv<=5){
						sendCommand({'command':'pl_next'});
					}
					intv	=	0;
					return false;
				});
				$('#buttonPlEmpty').click(function(){
					sendCommand({'command':'pl_empty'})
					return false;
				});
				$('#buttonLoop').click(function(){
					sendCommand({'command':'pl_loop'});
					return false;
				});
				$('#buttonRepeat').click(function(){
					sendCommand({'command':'pl_repeat'});
					return false;
				});
				$('#buttonShuffle').click(function(){
					sendCommand({'command':'pl_random'});
					return false;
				})
				$('#buttonRefresh').click(updatePlayList);
				$('#buttonPlPlay').click(function(){
					sendCommand({
						'command': 'pl_play',
						'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
					})
					return false;
				});
				$('#buttonPlAdd').click(function(){
					$('.jstree-clicked','#libraryTree').each(function(){
						if($(this).parents().first().attr('uri')){
							sendCommand({
								'command':'in_enqueue',
								'input' : $(this).parents().first().attr('uri')
							});
						};
					});
					$('#libraryTree').jstree('deselect_all');
					setTimeout(updatePlayList,1000);
					return false;
				});
				$('#buttonStreams, #buttonStreams2').click(function(){
					updateStreams();
					$('#window_streams').dialog('open');
				});
				$('#buttonSout').click(function(){
					if(current_que=='main'){
						$('#windowStreamConfirm').dialog('open');
					}else{
						$('#player').empty();
						current_que		=	'main';
						sendVLMCmd('del Current');
						updateStatus();
					}
					return false;
				});
				$('#windowStreamConfirm').dialog({
					autoOpen: false,
					width:600,
					modal: true,
					buttons:{
						"Yes":function(){
							var file			=	$('[current="current"]','#libraryTree').length>0 ? decodeURIComponent($('[current="current"]','#libraryTree').first().attr('uri').substr(7)) : ($('.jstree-clicked','#libraryTree').length>0 ? decodeURIComponent($('.jstree-clicked','#libraryTree').first().parents().first().attr('uri').substr(7)) : ($('#plid_'+current_id).attr('uri') ? decodeURIComponent($('#plid_'+current_id).attr('uri').substr(7)) : false));
							if(file){
								if($('#viewContainer').css('display')=='none'){
									$('#buttonViewer').click();
								}
								var defaultStream	=	'new Current broadcast enabled input "'+file+'" output #transcode{vcodec=FLV1,vb=4096,fps=25,scale=1,acodec=mp3,ab=512,samplerate=44100,channels=2}:std{access='+$('#stream_protocol').val()+',mux=ffmpeg{{mux=flv}},dst=0.0.0.0:'+$('#stream_port').val()+'/'+$('#stream_file').val()+'}';
								sendVLMCmd('del Current;'+defaultStream+';control Current play');
								$('#player').empty();
								$('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
								flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
								current_que			=	'stream';
								updateStreams();
							}
							$(this).dialog('close');
						},
						"No":function(){
							$(this).dialog('close');
						}
					}
				});
				$('#viewContainer').animate({height: 'toggle'});
			});
		</script>
	</head>
	<body>
		<div align="center">
		<div id="mainContainer" align="center">
			<div id="controlContainer" class="ui-widget">
				<div class="ui-widget-header" style="text-align: left;">
					<img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls
				</div>
				<table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content">
					<tr>
						<td id="controlButtons" width="380px">
							<div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
							<div id="buttonPlay" class="button48  ui-corner-all" title="Play"></div>
							<div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
							<div id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></div>
							<div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>
							<div id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></div>
							<div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>
						</td>
						<td valign="top" width="42px">
							<div id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Library" style="float: left;"><span class="ui-icon ui-icon-note"></span></div>
							<div id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Viewer" style="float: left;"><span class="ui-icon ui-icon-video"></span></div>
							<div id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams" style="float: left;"><span class="ui-icon ui-icon-script"></span></div>
							<div id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="Track Synchronisation" style="float: left;"><span class="ui-icon ui-icon-transfer-e-w"></span></div>
							<div id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="Equalizer" style="float: left;"><span class="ui-icon ui-icon-signal"></span></div>
							<div id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="VLM Batch Commands" style="float: left;"><span class="ui-icon ui-icon-suitcase"></span></div>
						</td>
						<td>
							<div style="margin-left:20px;">
								<div id="volumeSlider" title="Volume" style="width:200px"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
								<div id="currentVolume" class="dynamic">50%</div>
							</div>
						</td>
						<td rowspan="3" valign="top" width="141px">
							<img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<div id="mediaTitle" class="dynamic"></div>
						</td>
					</tr>
					<tr>
						<td id="seekContainer" valign="bottom" colspan="3">
							<div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
							<table width="100%">
								<tr>
									<td>
										<div id="currentTime" class="dynamic">00:00:00</div>
									</td>
									<td>
										<div id="totalTime" class="dynamic">00:00:00</div>
									</td>
								</tr>
							</table>
						</td>
					</tr>

				</table>
			</div>
			<div id="viewContainer" class="ui-widget">
				<div class="ui-widget-header" style="text-align: left;"><img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Viewer</div>
				<div id="mediaViewer" class="ui-widget-content">
					<div href="http://localhost:8081/stream.flv" style="display:block; width:100%" id="player"></div>
				</div>
			</div>
			<div id="libraryContainer" class="ui-widget">
				<div class="ui-widget-header" style="text-align: left;">
					<img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Library
				</div>
				<div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
					<div id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="Shuffle"><span class="ui-icon ui-icon-shuffle"></span></div>
					<div id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="Loop"><span class="ui-icon ui-icon-refresh"></span></div>
					<div id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="Repeat"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></div>
					<div id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="Empty Playlist"><span class="ui-icon ui-icon-trash"></span></div>
					<div id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="Queue Selected"><span class="ui-icon ui-icon-plus"></span></div>
					<div id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="Play Selected"><span class="ui-icon ui-icon-play"></span></div>
					<div id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="Refresh List"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></div>
				</div>
				<div id="libraryTree" class="ui-widget-content"></div>
			</div>
			
			<div class="footer">
				VLC <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
			</div>
		</div>
		</div>
		<div id="windowStreamConfirm" title="Confirm Stream Settings">
			<p>
				By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.
				The stream will be created using default settings, for more advanced configuration, or to modify the default settings,
				select the <i>Manage Streams</i>
				<span id="buttonStreams2" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams"><span class="ui-icon ui-icon-script"></span></span>
				button to the right. 
			</p>
			<p>
				Once the stream is created, the <i>Media Viewer</i> window will display the stream.
				Volume will be controlled by the player, and not the <i>Main Controls</i>.
			</p>
			<p>
				The current playing item will be streamed. If there is no currently playing item, the first selected item from the <i>Library</i> will be the subject of the stream.
			</p>
			<p>
				To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.
			</p>
			<p>
				Are you sure you wish to create the stream?
			</p>
		</div>
		<?vlc
		current_page = "index"

		dialogs("browse_window.html","stream_window.html","create_stream.html","offset_window.html","mosaic_window.html","equalizer_window.html","batch_window.html","error_window.html");
		?>
	</body>
</html>